<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码验证</title>
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="dist/1.css">
    <script src="1.js"></script>
</head>
<body>
    <style>
        [id*='error']{
            display: block;
        }
    </style>
   <form action="">
       用户名:<input type="text" name="username">
       <span id="user-error"></span>
       <hr>
       密码:<input type="text" name="password" >
       <span id="password-error"></span>
       <br>
       确认密码:<input type="text" name="confirm_password">
       <hr>
       <button>提交</button>
   </form>
   <script>

       const validateObject = new Validate();
    //    validateObject.show();
    //    console.log(query(`[name="password"]`));
    validateObject.confirm('password','confirm_password','两次密码不一样','#password-error','keyup');
    validateObject.max('username','用户名不能超过10位',10,'#user-error','keyup');
       //查找元素方法
       /**
        * 查找元素方法
        * @param name string 元素选择器
        */
    //    function query(name){
    //        return document.querySelector(name);
    //    }

    
       /**
        * 数据校验方法
        * @param password string 密码元素
        * @param confirmPassword string 确认密码
        * @param message string 失败时提醒的信息
        * @param errorEl string 显示错位消息的元素
        * @param eventType  触发时间
        */
    //    function confirm(password,confirmPassword,message,errorEl,eventType){

    //         let elements = document.querySelectorAll(`[name="${password}"],[name="${confirmPassword}"]`);

    //         elements.forEach(function(elem){
    //             this.addEventListener(`${eventType}`,function(){
    //             const passwordValue =query(`[name="${password}"]`).value;
    //             // console.log(passwordValue);
    //             const confirmValue =query(`[name="${confirmPassword}"]`).value;
    //             //console.log(confirmValue);
    //             if(passwordValue !=confirmValue){
    //                 query(errorEl).innerHTML=message;
    //             }else{
    //                 query(errorEl).innerHTML= '';
    //             }
    //         });
    //         });    
    //    }
    
   </script>
   
</body>
</html>